<template>
  <div class="skill-a-w">
    <div class="skill" v-for="(skill, index) in item.list" :key="index">
      <div class="top-border"></div>
      <div class="title">{{ skill.title }}</div>
      <div class="subtitle">{{ skill.desc }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SkillA',
  props: ['item'],
}
</script>

<style lang="scss" scoped>
@import "src/assets/common.scss";

.skill-a-w {
  padding: 10px 30px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  .skill {
    width: 28%;
    background: white;
    display: flex;
    flex-flow: column;
    align-items: flex-start;

    .top-border {
      height: 4px;
      width: 20px;
      border-radius: 5px;
      background: $c2;
    }

    .title {
      display: flex;
      justify-content: center;
      margin-top: 5px;
      font-size: 12px;
      color: $c1;
      font-weight: 600;
      margin-bottom: 3px;
    }

    .subtitle {
      //padding: 0 3px;
      font-size: 10px;
      //text-indent: 10px;
      line-height: 1.8;
      color: rgb(110, 110, 110);
    }
  }
}

</style>
